import React from 'react';
import clsx from 'clsx';
import Avatar from '@material-ui/core/Avatar';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
    out: {
        height: theme.spacing(4),
    },
    small: {
        width: theme.spacing(3),
        height: theme.spacing(3),
    },
    green: {
        color: "white",
        backgroundColor: "#2F855A", // bg-green-700
    },
    blue: {
        color: "white",
        backgroundColor: "#2B6CB0", // bg-blue-700
    },
    gray: {
        color: "white",
        backgroundColor: "#4A5568", // bg-gray-700
    },
    red: {
        color: "white",
        backgroundColor: "#C53030", // bg-red-700
    },
    yellow: {
        color: "white",
        backgroundColor: "#B7791F", // bg-yellow-700
    },
}));

const Chip = ({ label, flag, cl="gray" }) => {
    const classes = useStyles();

    const Ava = () => {
        if (flag) {
            return <Avatar className={clsx(classes.small, classes[cl])}>{flag}</Avatar>;
        }

        return null;
    };

    return (
        <div className={clsx(classes.out, `inline-flex items-center border rounded-l-full rounded-r-full p-1 border-${cl}-300 border-2 bg-${cl}-300`)}>
            <Ava/>
            <div className={`mx-2 text-${cl}-900`}>{label}</div>
        </div>
    );
};

export {Chip};
